<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>

<body>

    <input type="button" value="koa-body" onclick="sendBodyParams()">
    <input type="button" value="传参数组" onclick="sendBodyParams2()">
    <input type="button" value="传参string" onclick="sendBodyParams3()">
    <script>
        /*  
         
         请求报文体参数(请求体参数)
         注意：请求报文参数的携带会在请求报文头中增加Content-Type字段，该字段的目的是为了告知服务器参数的类型格式
                 自定义格式报文头
                     =>请求报文载荷，在浏览器中这个参数被命名为Request payload
 
 
                 表单文本报文体，在浏览器器中被命名为Form Data
                    =>请求头中描述数据类型为:Content-Type: application/x-www-form-urlencoded
                    =>参数以URL地址参数(查询参数格式)规则组成:key1=value1&key2=value2......
 
 
                 表单二进制报文体，在浏览器器中被命名为Form Data 
                    =>请求头中描述数据类型为:Content-Type: multipart/form-data
                    =>参数必须是一个特殊的表单数据对象FormData(必须通过new FormData)
             
 
         
         */

        function sendBodyParams() {
            axios({
                url: "http://127.0.0.1:3000/test/body",
                data: {
                    username: "admin",
                    password: 123456
                },
                method: "post"
            }).then(function (res) {
                console.log(res.data);
            }).catch(function (error) {
                console.log(error);
            });
        }

        function sendBodyParams2() {

            // axios.post(url,[,data,[,config]])发送post类型的请求
            // data就是携带的请求体参数
            // 理论上可以携带任意类型的数据，但是实际开发中因参数名称问题，只会传递对象格式数据
            axios.post("http://127.0.0.1:3000/test/body", [100, 300, 400, 500])
                .then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
                    console.log(error);
                });
        }

        function sendBodyParams3() {

           
            axios.post("http://127.0.0.1:3000/test/body", '{"username":"cici","password":222222}',{
                headers:{
                    //设置请求头，为了告知服务器参数的类型格式
                    "Content-Type":"application/json"
                }
            })
            .then(function (res) {
                console.log(res.data);
            }).catch(function (error) {
                console.log(error);
            });
        }

        
    </script>
</body>

</html>